{extend name="member/common/login_layout" /}

{block name="content"}
	<!-- PublicHeadLayout End -->
	<div id="append_parent"></div>
	<div id="ajaxwaitid"></div>

<div class="nc-register-bg">
	<div class="nc-register-box">
		<div class="nc-register-layout">
			<div class="left">
				<div class="nc-register-mode">
					<ul class="tabs-nav">
						<li><a href="#default">账号注册<i></i></a></li>
						<?php if (sysconf('sms_register') == 1){?>
						<li><a href="#mobile">手机注册<i></i></a></li>
						<?php } ?>
					</ul>
					<div id="tabs_container" class="tabs-container">
						<div id="default" class="tabs-content">
							<form id="register_form" method="post" class="nc-login-form" action="member/Login/usersave?a=1">

								<dl>
									<dt>用户名：</dt>
									<dd>
										<input type="text" id="user_name" name="user_name" class="text" tipMsg="请使用6-20个中、英文、数字及“-”符号"/>
									</dd>
								</dl>
								<dl>
									<dt>设置密码：</dt>
									<dd>
										<input type="password" id="password" name="password" class="text" tipMsg="6-20个大小写英文字母、符号或数字"/>
									</dd>
								</dl>
								<dl>
									<dt>确认密码：</dt>
									<dd>
										<input type="password" id="password_confirm" name="password_confirm" class="text" tipMsg="请再次输入密码"/>
									</dd>
								</dl>
								<!--<dl class="mt15">
									<dt>邮箱：</dt>
									<dd>
										<input type="text" id="email" name="email" class="text" tipMsg="输入常用邮箱作为验证及找回密码使用"/>
									</dd>
								</dl>-->
								<?php if(sysconf('captcha_status_register') == '1') { ?>
								<div class="code-div mt15">
									<dl>
										<dt>验证码：</dt>
										<dd>
											<input type="text" id="captcha" name="captcha" class="text w80" size="10" tipMsg="输入验证码" />
										</dd>
									</dl>
									<span><img src="{:url('verify_code')}" name="codeimage" id="codeimage"/>
										<a class="makecode" href="javascript:void(0)" onclick="javascript:document.getElementById('codeimage').src='{:url(\'verify_code\')}?t=' + Math.random();">看不清，换一张</a>
									</span>
								</div>
								<?php } ?>
								<dl class="clause-div">
									<dd>
										<input name="agree" type="checkbox" class="checkbox" id="clause" value="1" checked="checked" />
										阅读并同意<a href="{:url('home/Document/index',array('code'=>'agreement'))}" target="_blank" class="agreement" title="《用户协议》">《用户协议》</a>
										和<a href="{:url('home/Document/index',array('code'=>'privacy'))}" target="_blank" class="agreement" title="《隐私政策》">《隐私政策》</a>
									</dd>
								</dl>
								<div class="submit-div">
									<input type="submit" id="Submit" value="立即注册" class="submit"/>
								</div>
								<input type="hidden" value="{$Think.get.ref_url}" name="ref_url">
								<!--<input name="nchash" type="hidden" value="<?php echo getNchash();?>" />-->
								<input type="hidden" name="form_submit" value="ok" />
							</form>
						</div>
						<?php if (sysconf('sms_register') == 1){?>
						<div id="mobile" class="tabs-content">
							<form id="post_form" method="post" class="nc-login-form layui-form">

								<!--<input type="hidden" name="form_submit" value="ok" />-->
								<!--<input name="nchash" type="hidden" value="<?php echo getNchash();?>" />-->
								<dl>
									<dt>手机号：</dt>
									<dd>
										<input type="text" class="text" tipMsg="请输入手机号码" autocomplete="off" value="" name="phone" id="phone"  lay-verify="phone">
									</dd>
								</dl>
								<div class="code-div">
									<dl>
										<dt>验证码：</dt>
										<dd>
											<input type="text" name="captcha" class="text w100" id="image_captcha" size="10" tipMsg="输入验证码" lay-verify="captcha"/>
										</dd>
									</dl>
									<span><img src="{:url('verify_code')}" title="看不清？单击此处刷新" name="codeimage" id="sms_codeimage"><a class="makecode" href="javascript:void(0);" onclick="javascript:document.getElementById('sms_codeimage').src='{:url('verify_code')}'">看不清，换一张</a></span>
								</div>
								<div class="tiptext" id="sms_text">确保上方验证码输入正确，点击<span><a href="javascript:void(0);" onclick="get_sms_captcha('1')"><i class="icon-mobile-phone"></i>发送短信验证</a></span>，并将您手机短信所接收到的“6位验证码”输入到下方短信验证，再提交下一步。</div>
								<dl>
									<dt>短信验证：</dt>
									<dd>
										<input type="text" name="sms_captcha" autocomplete="off" tipMsg="输入6位短信验证码" class="text" id="sms_captcha" size="15" lay-verify="sms_captcha"/>
									</dd>
								</dl>
								<div class="submit-div">
									<input type="button" id="submitBtn" class="submit" lay-submit="" lay-filter="ajax_register_step1" value="下一步">
								</div>
							</form>
							<form style="display: none;" id="register_sms_form" class="nc-login-form layui-form" method="post" action="">
								<!--<input type="hidden" name="form_submit" value="ok" />-->
								<input type="hidden" name="register_captcha" id="register_sms_captcha" value="" />
								<input type="hidden" name="register_phone" id="register_phone" value="" />
								<dl>
									<dt>用户名：</dt>
									<dd>
										<input type="text" id="member_name" name="member_name" class="text w150" value="" lay-verify="username" />
									</dd>
                                    <!--<span class="note">系统生成随机用户名，可选择默认或自行修改</span>-->
                                    <span class="note">设置登录用户名</span>
								</dl>
								<dl>
									<dt>设置密码：</dt>
									<dd>
										<input type="text" id="sms_password" placeholder="请设置密码" name="password" class="text w150" value="" lay-verify="password" />
									</dd>
									<!--<span class="note">系统生成随机密码，请牢记或修改为自设密码。</span>-->
									<span class="note">6-20个大小写英文字母、符号或数字</span>
								</dl>
								<dl>
									<dt>确认密码：</dt>
									<dd>
										<input type="text" id="sms_password_confirm" placeholder="请再次输入密码" name="password_confirm" class="text w150" value="" lay-verify="password_confirm" />
									</dd>
									<span class="note">请再次输入密码</span>
								</dl>
								<!--<dl class="mt15">
									<dt>邮箱：</dt>
									<dd>
										<input type="text" id="sms_email" name="email" class="text" value="" tipMsg="输入常用邮箱作为验证及找回密码使用" />
									</dd>
								</dl>-->
								<dl class="clause-div">
									<dd>
										<input name="agree" lay-ignore="" type="checkbox" class="checkbox" id="sms_clause" value="1" checked="checked" />
										阅读并同意<a href="{:url('home/Document/index',array('code'=>'agreement'))}" target="_blank" class="agreement" title="阅读并同意">《服务协议》</a>
								</dl>
								<div class="submit-div">
									<input type="submit" value="提交注册" class="submit" lay-submit="" lay-filter="ajax_register_finish" title="提交注册" />
								</div>
							</form>
						</div>
						<?php } ?>
					</div>
				</div>
			</div>
			<div class="right">
				<?php if (sysconf('qq_isuse') == 1 || sysconf('sina_isuse') == 1 || sysconf('weixin_isuse') == 1){?>
				<div class="api-login">
					<h4>使用合作网站账号直接登录</h4>
					<?php if (sysconf('qq_isuse') == 1){?>
					<a href="{:url('member/Connectqq/index')}" title="QQ账号登录" class="qq"><i></i></a>
					<?php } ?>
					<?php if (sysconf('sina_isuse') == 1){?>
					<a href="{:url('member/Connectsina/index')}" title="新浪微博账号登录" class="sina"><i></i></a>
					<?php } ?>
					<?php if (sysconf('weixin_isuse') == 1){?>
					<a href="javascript:void(0);" onclick="ajax_form('weixin_form', '微信账号登录', '{:url(\'member/Connectwx/index\')}', 360);" title="微信账号登录" class="wx"><i></i></a>
					<?php } ?>
				</div>
				<?php } ?>
				<!--<div class="reister-after">
					<h4>注册之后您可以</h4>
					<ol>
						<li class="ico01"><i></i>购买商品支付订单</li>
						<li class="ico02"><i></i>收藏商品关注店铺</li>
						<li class="ico03"><i></i>安全交易诚信无忧</li>
						<li class="ico04"><i></i>积分获取优惠购物</li>
						<li class="ico05"><i></i>会员等级享受特权</li>
						<li class="ico06"><i></i>评价晒单站外分享</li>
					</ol>
				</div>-->
			</div>
		</div>
	</div>
</div>

<!-- layer 3.0 -->
<script src="__PUBLIC__/static/plugs/layer/layer.js"></script>

<!-- layui 2.0-->
<link rel="stylesheet" href="__PUBLIC__/static/plugs/layui/css/layui.css">
<script src="__PUBLIC__/static/plugs/layui/layui.js"></script>

<!-- popup js -->
<script language="javascript" src="__PUBLIC__/static/admin/js/popup.js" type="text/javascript"></script>


<script>
    $(function(){
        jQuery.validator.addMethod("letters_name", function(value, element) {
            return this.optional(element) || (/^[A-Za-z0-9\u4e00-\u9fa5_-]+$/i.test(value) && !/^\d+$/.test(value));
        }, "Letters only please");
        //初始化Input的灰色提示信息  
        $('input[tipMsg]').inputTipText({pwd:'password,password_confirm'});
        //注册方式切换
        $('.nc-register-mode').tabulous({
            //动画缩放渐变效果effect: 'scale'
            effect: 'slideLeft'//动画左侧滑入效果
            //动画下方滑入效果 effect: 'scaleUp'
            //动画反转效果 effect: 'flip'
        });
        var div_form = '#default';
        $(".nc-register-mode .tabs-nav li a").click(function(){
            if($(this).attr("href") !== div_form){
                div_form = $(this).attr('href');
                $(""+div_form).find(".makecode").trigger("click");
            }
        });

//注册表单验证
        $("#register_form").validate({
                errorPlacement: function(error, element){
                    var error_td = element.parent('dd');
                    error_td.append(error);
                    element.parents('dl:first').addClass('error');
                },
                success: function(label) {
                    label.parents('dl:first').removeClass('error').find('label').remove();
                },
                submitHandler:function(form){
                    ajaxpost('register_form', '', '', 'onerror');
                },
                onkeyup: false,
                rules : {
                    user_name : {
                        required : true,
                        rangelength : [6,20],
                        letters_name : true,
                        remote   : {
                            url :'{:url('/member/Login/check_member')}?column=ok',
                            type:'get',
                            data:{
                                user_name : function(){
                                    return $('#user_name').val();
                                }
                            }
                        }
                    },
                    password : {
                        required : true,
                        minlength: 6,
                        maxlength: 20
                    },
                    password_confirm : {
                        required : true,
                        equalTo  : '#password'
                    },
                    /*email : {
                        required : true,
                        email    : true,
                        remote   : {
                            url : '{:url('/member/Login/check_email')}',
                            type: 'get',
                            data:{
                                email : function(){
                                    return $('#email').val();
                                }
                            }
                        }
                    },*/
                <?php if(sysconf('captcha_status_register') == '1') { ?>
            captcha : {
                required : true,
                    remote   : {
                    url : 'checkVerifyCode',
                        type: 'get',
                        data:{
                        captcha : function(){
                            return $('#captcha').val();
                        }
                    },
                    complete: function(data) {
                        if(data.responseText == 'false') {
                            document.getElementById('codeimage').src="{:url('verify_code')}";
                        }
                    }
                }
            },
        <?php } ?>
        agree : {
            required : true
        }
    },
        messages : {
            user_name : {
                required : '<i class="icon-exclamation-sign"></i>用户名不能为空',
                    rangelength : '<i class="icon-exclamation-sign"></i>用户名必须在6-20个字符之间',
                    letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
                    remote	 : '<i class="icon-exclamation-sign"></i>该用户名已经存在'
            },
            password  : {
                required : '<i class="icon-exclamation-sign"></i>密码不能为空',
                    minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
                    maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
            },
            password_confirm : {
                required : '<i class="icon-exclamation-sign"></i>您必须再次确认您的密码',
                    equalTo  : '<i class="icon-exclamation-sign"></i>两次输入的密码不一致'
            },
            /*email : {
                required : '<i class="icon-exclamation-sign"></i>电子邮箱不能为空',
                    email    : '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
                    remote	 : '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
            },*/
        <?php if(sysconf('captcha_status_register') == '1') { ?>
                captcha : {
                    required : '<i class="icon-remove-circle" title="请输入验证码"></i>',
                        remote	 : '<i class="icon-remove-circle" title="验证码不正确"></i>'
                },
            <?php } ?>
            agree : {
                required : '<i class="icon-exclamation-sign"></i>请勾选服务协议'
            }
        }
    });
    });
</script>
<?php if (sysconf('sms_register') == 1){?>


<!--<script type="text/javascript" src="__MEMBER_PATH__/js/connect_sms.js" charset="utf-8"></script>-->
<script>
//    $(function(){
//        $("#submitBtn").click(function(){
//            if($("#post_form").valid()){
//                check_captcha();
//            }
//        });
//        $("#post_form").validate({
//            errorPlacement: function(error, element){
//                var error_td = element.parent('dd');
//                error_td.append(error);
//                element.parents('dl:first').addClass('error');
//            },
//            success: function(label) {
//                label.parents('dl:first').removeClass('error').find('label').remove();
//            },
//            onkeyup: false,
//            rules: {
//                phone: {
//                    required : true,
//                    mobile : true
//                },
//                captcha : {
//                    required : true,
//                    minlength: 4,
//                    remote   : {
//                        url : 'checkVerifyCode',
//                        type: 'get',
//                        data:{
//                            captcha : function(){
//                                return $('#image_captcha').val();
//                            }
//                        },
//                        complete: function(data) {
//                            if(data.responseText == 'false') {
//                                document.getElementById('sms_codeimage').src="{:url('verify_code')}";
//                            }
//                        }
//                    }
//                },
//                sms_captcha: {
//                    required : function(element) {
//                        return $("#image_captcha").val().length == 4;
//                    },
//                    minlength: 6
//                }
//            },
//            messages: {
//                phone: {
//                    required : '<i class="icon-exclamation-sign"></i>输入正确的手机号',
//                    mobile : '<i class="icon-exclamation-sign"></i>输入正确的手机号'
//                },
//                captcha : {
//                    required : '<i class="icon-remove-circle" title="请输入验证码"></i>',
//                    minlength: '<i class="icon-remove-circle" title="请输入验证码"></i>',
//                    remote	 : '<i class="icon-remove-circle" title="验证码不正确"></i>'
//                },
//                sms_captcha: {
//                    required : '<i class="icon-exclamation-sign"></i>请输入六位短信验证码',
//                    minlength: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码'
//                }
//            }
//        });
//        $('#register_sms_form').validate({
//            errorPlacement: function(error, element){
//                var error_td = element.parent('dd');
//                error_td.append(error);
//                element.parents('dl:first').addClass('error');
//            },
//            success: function(label) {
//                label.parents('dl:first').removeClass('error').find('label').remove();
//            },
//            submitHandler:function(form){
//                ajaxpost('register_sms_form', '', '', 'onerror');
//            },
//            rules : {
//                member_name : {
//                    required : true,
//                    rangelength : [6,20],
//                    letters_name : true,
//                    remote   : {
//                        url :'{:url('/member/Login/check_member')}?column=ok',
//                        type:'get',
//                        data:{
//                            user_name : function(){
//                                return $('#member_name').val();
//                            }
//                        }
//                    }
//                },
//                password : {
//                    required   : true,
//                    minlength: 6,
//                    maxlength: 20
//                },
//                email : {
//                    email    : true,
//                    remote   : {
//                        url : '{:url('/member/Login/check_email')}',
//                        type: 'get',
//                        data:{
//                            email : function(){
//                                return $('#sms_email').val();
//                            }
//                        }
//                    }
//                },
//                agree : {
//                    required : true
//                }
//            },
//            messages : {
//                member_name : {
//                    required : '<i class="icon-exclamation-sign"></i>用户名不能为空',
//                    rangelength : '<i class="icon-exclamation-sign"></i>用户名必须在6-20个字符之间',
//                    letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
//                    remote	 : '<i class="icon-exclamation-sign"></i>该用户名已经存在'
//                },
//                password  : {
//                    required : '<i class="icon-exclamation-sign"></i>密码不能为空',
//                    minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
//                    maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
//                },
//                email : {
//                    email    : '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
//                    remote	 : '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
//                },
//                agree : {
//                    required : '<i class="icon-exclamation-sign"></i>请勾选服务协议'
//                }
//            }
//        });
//    });
</script>

<script>
    function get_sms_captcha(){
        if($("#phone").val().length == 11){

            $.ajax({
                type: "GET",
                url: '{:url("member/Login/sendSms")}?type=register&mobile=' + $('#phone').val(),
                async: false,
                success: function(res){
                    if(res.state == 200) {
                        $("#sms_text").html('短信验证码已发出');
                    } else {
                        layer.msg(res.message, function(){});
                    }
                }
            });
        }
    }
</script>

<script>
    layui.use(['form'], function() {
        var form = layui.form;

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length < 1){
                    return '登录账号不能为空';
                }
            },
            password: function(value){
                if(value.length < 1){
                    return '密码不能为空';
                }
                if(value.length > 1 && value.length < 6){
                    return '密码为6-20个字符';
                }
            },
            password_confirm: function(value){
                if(value.length < 1){
                    return '确认密码不能为空';
                }
                if(value.length > 1 && value.length < 6){
                    return '确认密码为6-20个字符';
                }

            },
            captcha: function(value){
                if(value == '输入验证码' || value.length < 4){
                    return '验证码至少为4位';
                }
            },

            sms_captcha: function(value){
                if(value == '输入6位短信验证码' || value.length < 6){
                    return '手机验证码至少为6位';
                }
            }
        });

        // ajax 提交
        form.on('submit(ajax_register_step1)', function(data){

            data.field.register_step = 'step1';
            $.post('/member/Login/registerStep1',data.field,function(res){
                if (res.code == 1){
                    // 第一步验证成功 进入下一步
//                    layer.alert(res.message, {
//                        title: '提示信息'
//                        ,icon: 1
//                        ,skin: 'layer-ext-moon'
//                        ,time: 1000
//                        ,end: function () {
//                            // 回调函数
//                            $("#post_form").hide();
//                            $("#register_sms_form").show();
//                        }
//                    })
                    $("#post_form").hide();
                    $("#register_sms_form").show();

                    $("#register_sms_captcha").val(data.field.sms_captcha);
                    $("#register_phone").val(data.field.phone);
                }else {
                    // 刷新验证码
                    document.getElementById('sms_codeimage').src="{:url('verify_code')}";
                    layer.msg(res.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    })
                }

            });
            return false;
        });

        form.on('submit(ajax_register_finish)', function(data){
            data.field.register_step = 'finish';
            $.post('/member/Login/registerFinish',data.field,function(res){

                if (res.code == 1){
                    popup_jump(res, 1);
                }else {
                    layer.msg(res.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    })
                }

            });
            return false;
        });
    });
</script>

<?php } ?>


{/block}
